<style scoped>
    @import "../styles/detail.css";
</style>
<template>
    <div class="page-wrap page-detail" id="page-latest">
        <div class="g-body">
            <div class="m-winRecord">
                <header-component keep-alive :page-name="pageName"></header-component>
                <div class="g-wrap">
                    <div class="m-winRecord-wrap">
                        <div class="w-loading" style="display: none;">
                            <img style="display:inline;vertical-align:middle" width="20" height="20" src="http://mimg.127.net/p/yymobile/lib/img/common/loading.gif"> 正在努力加载中……
                        </div>
                        <ul class="m-winRecord-list" id="latestList">
                            <li class="w-record m-winRecord-revealed" v-for="(k,i) in data">
                                <div class="w-record-title"><a href="javascript:;">商品：{{i.goods_name}} &nbsp; 期号：{{i.goods_qishu}} ( 揭晓时间：{{i.goods_end_time}} )</a></div>
                                <div class="w-record-cnt f-clear">
                                    <div class="w-record-avatar2">
                                        <a href="javascript:;" data-href="?c=detail&amp;id={{goods_id}}" v-link="{path:'/detail',query:{id:i.goods_id}}"><img width="90" height="90" :src="i.goods_img"></a>
                                    </div>
                                    <div class="w-record-detail">
                                        <p class="f-txtabb">商品名称：<a href="javascript:;" data-href="?c=detail&amp;id={{goods_id}}" v-link="{path:'/detail',query:{id:i.goods_id}}">{{i.goods_name}}</a></p>
                                        <p class="f-txtabb">获奖者：<a href="javascript:;" data-href="?c=profile&amp;id={{goods_q_uid_bak}}" v-link="{name:'profile',query:{id:i.goods_q_uid_bak}}">{{i.goods_q_uname}}</a></p>
                                        <p>用户ID：{{i.goods_q_uid}} (唯一不变标识)</p>
                                        <p>幸运号码：<span class="txt-red">{{i.goods_code}}</span></p>
                                        <p>本期参与：<span class="txt-red">{{i.goods_in_number}}</span>人次</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="w-more" id="latestListMore" v-el:get-latest-list-more>
                            <template v-if="data.length>0&&hasMore">
                                <b class="ico ico-loading"></b> 努力加载中

                            </template>
                            <template v-if="data.length>0&&!hasMore">
                                最多查看最新50条的揭晓记录
                            </template>
                            <template v-if="data.length==0">
                                暂无商品
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

    import headerComponent from '../components/header'
    import Goods from '../module/goods'

    module.exports = {
        data() {

            return {

                pageName: '最新揭晓',
                data: [],
                page: 0,
                limit: 10,
                hasMore: true,
                loading: false,

            }
        },

        components: {

            headerComponent
        },
        created(){

            this.$dispatch('isLoading', true);

        },
        async ready() {

            await this.loadMore();

            document.addEventListener('scroll',this.getMore,false)

            this.$dispatch('isLoading', false);

        },
        beforeDestroy() {

            document.removeEventListener('scroll',this.getMore,false)

        },
        methods: {

            async loadMore(){

                if (this.loading) {

                    return;

                }


                this.loading = true;

                let res = await Goods.getLatest({offset:this.page * this.limit,limit:this.limit});

                if (res && res.item && res.item.length > 0) {

                    this.page++;

                    this.data.push(...res.item);

                } else {

                    this.hasMore = false;

                }

                this.loading = false;

            },

            async getMore(){

                let pos = this.$els.getLatestListMore.getBoundingClientRect();

                if (this.hasMore &&((pos.top > 0 && window.innerHeight - pos.top > 0) || (pos.top <= 0 && pos.bottom >= 0))) {

                    await this.loadMore();

                }

            }

        }
    }
</script>
